import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Input, Button,Toast } from 'antd-mobile';
import { Uploader } from '@nutui/nutui-react'

export default function Feedback() {
    const navigate = useNavigate();
    const [text, setText] = useState('');
    const [contact, setContact] = useState('');
    const handleTextChange = (e) => {
        setText(e.target.value);
    };
    let [file,setfile] = useState([])
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>意见反馈</NavBar>
            <div style={{ background: "#f7f7f7", height: "calc(100vh - 45px)" }}>
                <div style={{ color: "#b4b4b4", display: "flex", justifyContent: "space-between", padding: "20px" }}>
                    <p>请填写问题描述</p>
                    <p>{text.length}/200</p>
                </div>
                <textarea
                    maxLength={200}
                    value={text}
                    onChange={handleTextChange}
                    style={{ width: "100vw", fontSize: "16px", height: "200px", border: "none", padding: "10px", boxSizing: "border-box" }}
                    placeholder='请详细描述你的问题~'
                />
                <div style={{ color: "#b4b4b4", display: "flex", justifyContent: "space-between", padding: "20px" }}>
                    <p>截图(选填)</p>
                    <p>0/4</p>
                </div>
                <div style={{ width: "100vw", height: "auto", background: "white" }}>
                <Uploader style={{boxSizing:"border-box",padding:"10px"}} url="http://127.0.0.1:3000/addimg" multiple maxCount="5" onSuccess={(res)=>{
                    let list = []
                    res.files.forEach(i=>{
                        list.push(JSON.parse(i.responseText).path)
                    })
                    setfile(list)
                }}/>
                    <p style={{ color: "#b4b4b4", padding: "20px 0" }}>联系方式(选填，便于我们联系您)</p>
                    <Input
                        style={{ width: "calc(100vw - 20px)", padding: "10px", boxSizing: "border-box" }}
                        placeholder='请输入内容'
                        value={contact}
                        onChange={(val) => setContact(val)}
                    />
                    <div style={{ textAlign: "center", paddingTop: "20px" }}>
                        <Button onClick={()=>{
                            console.log(text);
                            console.log(file);
                            console.log(contact);
                            setText("")
                            setfile([])
                            setContact("")
                            Toast.show({
                                icon: 'success',
                                content: '感谢你的反馈',
                            })
                            setTimeout(() => {
                                navigate("/app/user")
                            }, 1000);
                        }} style={{ width: "85vw", margin: "20px auto" }} color='success'>提交</Button>
                    </div>
                </div>
            </div>
        </div>
    );
}